<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setCharacterEncoding("UTF-8");
%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<base href="/resources/" />
<script type="text/javascript">
	try {
		document.execCommand('BackgroundImageCache', false, true);
	} catch (e) {
	}
</script>

<script type="text/javascript"
	src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=ab6f4543787e128746951beaccfa88f4"></script>


<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<style>
body {
	background-image: url(img/bg/bg_orange.jpg);
}
</style>

<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<body onload="eventonload()" style="overflow-y: hidden">
	<%@ include file="../common/header.jspf"%>

	<%@ include file="../common/main_container.jspf"%>
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/eventload.js"></script>
	<!--메뉴-->
	<div id="popup">
		<div id="testMap" class="testMap"
			style="margin-top: 50px; margin-left: 150px;"></div>
		<img style="" id="popupbtn" src="img/mp/close.jpg"
			onclick="closeLayer()" />
	</div>

	<div class="container menu-back">

		<div id="pageLeft" class="page left">
			<img class="res_img" src="img/mp/btn.png">
			<div class="left_front">
				<div id="front_text">
					<font>초대합니다</font>
					</p>
					Ms.Nado invites you
				</div>
				<br>
				<div id="front_text1">
					<p>App for hunger</p>
					&amp;
					<p>Anyone don't</p>
					<p>know what want food</p>
				</div>
				<div class="logo">
					<img src="img/mp/btn_1.png">
				</div>
			</div>

			<div class="left_back">
				<div class="Comment">
					<div id="main_text" style="margin-top: 20px;">PartyMaster's
						Comment</div>
					<div id="comment">
						이 모임으로 말할 것 같으면 호랑이가 담배피던 시절부터 고철덩어리가 우주로 날아가는 시대까지 보지 못했던 신세계를 경험
						할 수 있을것입니다.
						</td>
					</div>
				</div>
				<div class="vote">
					<div style="margin-top: 20px;" id="main_text">Vote to</div>
					<div id="vote">
						<table>
							<tr>
								<td>전주완산골 :</td>
								<td><input type="checkbox" /></td>
							</tr>
							<tr>
								<td>삼일관 :</td>
								<td><input type="checkbox" /></td>
							</tr>
							<tr>
								<td>오라이 등심 :</td>
								<td><input type="checkbox" /></td>
							</tr>
							<tr>
								<td>한마루 :</td>
								<td><input type="checkbox" /></td>
							</tr>
						</table>
					</div>
					<div style="margin-top: -10px;">
						<table
							style="width: 100%; text-align: left; vertical-align: middle;">
							<tr>
								<td><input type="text"
									style="font-size: 16px; margin-left: 70px"
									placeholder="input your nickname" /></td>
								<td><img src="img/mp/btn_vote.png"
									style="margin-left: -122px;" /></td>
							</tr>
						</table>
					</div>
				</div>

			</div>
		</div>

		<div id="pageCenter" class="page center">
			<div class="center_front">
				<div id="main_text">List For Vote</div>

				<div class="container">
					<section class="ac-container">
					<div>
						<input id="ac-1" name="accordion-1" type="radio" checked /> <label
							for="ac-1">허서방갈비</label>
						<article class="ac-small">
						<p>
						<table>
							<tr>
								<td><img src="img/mp/00.jpg"></td>
								<table class="menu_text">
									<tr>
										<td>서울특별시 종로구</td>
									</tr>
									<tr>
										<td>종로5가 46</td>
									</tr>
									<tr>
										<td>02-741-2031</td>
										<td><img id="mapIcon" class="galbi" src="img/mp/map.png"
											value="map" onclick="openLayer()"></td>
									</tr>
								</table>
							</tr>
						</table>
						</p>

						</article>
					</div>
					<div>
						<input id="ac-2" name="accordion-1" type="radio" /> <label
							for="ac-2">전주완산골</label>
						<article class="ac-small">
						<p>
						<table>
							<tr>
								<td><img src="img/mp/01.jpg"></td>
								<table class="menu_text">
									<tr>
										<td>서울특별시 종로구</td>
									</tr>
									<tr>
										<td>종로5가 98-8</td>
									</tr>
									<tr>
										<td>02-745-6777</td>
										<td><img id="mapIcon" class="jeonju" src="img/mp/map.png"
											value="map" onclick="openLayer()"></td>
									</tr>
								</table>
							</tr>
						</table>
						</p>
						</article>
					</div>
					<div>
						<input id="ac-3" name="accordion-1" type="radio" /> <label
							for="ac-3">삼일관</label>
						<article class="ac-small">
						<p>
						<table>
							<tr>
								<td><img src="img/mp/02.jpg"></td>
								<table class="menu_text">
									<tr>
										<td>서울 특별시 종로구</td>
									</tr>
									<tr>
										<td>종로2가 39 뉴파코다빌딩1층</td>
									</tr>
									<tr>
										<td>02-743-4586</td>
										<td><img id="mapIcon" class="samil" src="img/mp/map.png"
											value="map" onclick="openLayer()"></td>
									</tr>
								</table>
							</tr>
						</table>
						</p>
						</article>
					</div>
					<div>
						<input id="ac-4" name="accordion-1" type="radio" /> <label
							for="ac-4">오라이 등심</label>
						<article class="ac-small">
						<p>
						<table>
							<tr>
								<td><img src="img/mp/03.jpg"></td>
								<table class="menu_text">
									<tr>
										<td>서울특별시 종로구</td>
									</tr>
									<tr>
										<td>종로5가 395-10</td>
									</tr>
									<tr>
										<td>02-2279-8449</td>
										<td><img id="mapIcon" class="orai" src="img/mp/map.png"
											value="map" onclick="openLayer()"></td>
									</tr>
								</table>
							</tr>
						</table>
						</p>
						</article>
					</div>
					<div>
						<input id="ac-5" name="accordion-1" type="radio" /> <label
							for="ac-5">한마루</label>
						<article class="ac-small">
						<p>
						<table>
							<tr>
								<td><img src="img/mp/04.jpg"></td>
								<table class="menu_text">
									<tr>
										<td>서울 종로구 종로1가</td>
									</tr>
									<tr>
										<td>24 르메이에르종로타운2층</td>
									</tr>
									<tr>
										<td>02-736-3777</td>
										<td><img id="mapIcon" class="hanmaru"
											src="img/mp/map.png" value="map" onclick="openLayer()"></td>
									</tr>
								</table>
							</tr>
						</table>
						</p>
						</article>
					</section>
				</div>

			</div>
			<img class="viewdetails" src="img/mp/btn_2.png">
		</div>
		<div id="pageRight" class="page right">
			<div class="right_front">right front</div>
			<div class="right_back">
				<div id="main_text">
					Time At <br>
				</div>
				<div style="font-size: 15px; margin-top: 10px">
					<input type="date" step=1 value="2013-01-26"> <input
						style="margin-top: 20px;" readonly="readonly" type="time"
						value="22:00">
				</div>
				<div></div>

				<div id="main_text" style="margin-top: 30px">Attenders</div>
				<table id="attender">
					<tr>
						<td>참석자</td>
						<td>연락처</td>
					</tr>
				</table>
				<table id="attenders">
					<tr>
						<td>황선오</td>
						<td>010-9281-6429</td>
					</tr>
					<tr>
						<td>왕슬기</td>
						<td>010-1234-1234</td>
					</tr>
					<tr>
						<td>조경미</td>
						<td>010-1234-1234</td>
					</tr>
					<tr>
						<td>백동현</td>
						<td>010-1234-1234</td>
					</tr>
				</table>

			</div>
		</div>

	</div>

	<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
	<script type="text/javascript" src="js/naverMap.js"></script>
	<script type="text/javascript" src="js/popup.js"></script>
	<script type="text/javascript"
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/menu3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#popup').hide();
		});

		var menu = Menu;
		//menu.openMenu();
		var oPoint = null;
		var oSize = new nhn.api.map.Size(28, 37);
		var oOffset = new nhn.api.map.Size(14, 37);
		var oIcon = new nhn.api.map.Icon(
				'http://static.naver.com/maps2/icons/pin_spot2.png', oSize,
				oOffset);
		console.log("default oPoint : " + oPoint);

		// 메뉴판 열리고 닫히는 js
		$('.viewdetails').bind("click", function(event) {
			event.preventDefault();
			menu.viewDetail($(this));
		});

		$('.logo').bind("click", function() {
			menu.openMenu();
		});

		// 네이버지도 js
		$('.galbi').bind("click", function() {
			if (oPoint == null) {
				oPoint = new nhn.api.map.TM128(312147, 552582);
				naverMap(oPoint)
				oMarker.setTitle("허서방갈비");
			} else {
				oPoint = new nhn.api.map.TM128(312147, 552582);
				oMarker.setTitle("허서방갈비");
				oMap.setCenter(oPoint);
				oMarker.setPoint(oPoint);
				oMap.addOverlay(oMarker);
			}

		});
		$('.jeonju').bind("click", function() {

			if (oPoint == null) {
				oPoint = new nhn.api.map.TM128(311949, 552593);
				naverMap(oPoint);
				oMarker.setTitle("전주완산골");
			} else {
				oPoint = new nhn.api.map.TM128(311949, 552593);
				oMarker.setTitle("전주완산골");
				oMap.setCenter(oPoint);
				oMarker.setPoint(oPoint);
				oMap.addOverlay(oMarker);
			}

		});
		$('.samil').bind("click", function() {

			if (oPoint == null) {
				oPoint = new nhn.api.map.TM128(310879, 552568);
				naverMap(oPoint);
				oMarker.setTitle("삼일관");
			} else {
				oPoint = new nhn.api.map.TM128(310879, 552568);
				oMarker.setTitle("수원역");
				oMap.setCenter(oPoint);
				oMarker.setPoint(oPoint);
				oMap.addOverlay(oMarker);
			}

		});

		$('.orai').bind("click", function() {

			if (oPoint == null) {
				oPoint = new nhn.api.map.TM128(311984, 552482);
				naverMap(oPoint);
				oMarker.setTitle("오라이등심");
			} else {
				oPoint = new nhn.api.map.TM128(311984, 552482);
				oMarker.setTitle("오라이등심");
				oMap.setCenter(oPoint);
				oMarker.setPoint(oPoint);
				oMap.addOverlay(oMarker);
			}

		});

		$('.hanmaru').bind("click", function() {

			if (oPoint == null) {
				oPoint = new nhn.api.map.TM128(310075, 552515);
				naverMap(oPoint);
				oMarker.setTitle("한마루");
			} else {
				oPoint = new nhn.api.map.TM128(310075, 552515);
				oMarker.setTitle("한마루");
				oMap.setCenter(oPoint);
				oMarker.setPoint(oPoint);
				oMap.addOverlay(oMarker);
			}

		});
	</script>
</body>

</html>